<template>
  <el-row :gutter="18">
    <el-col :span="6" :xs="24">
      <el-card>
        <div class="avatar">
          <CropperImage :img-src="userInfo.avatar" :upload-width="100" :upload-height="100" :preview-img-error="defaultAvatar" @input="handleAvatarInput">
            <i class="fa-solid fa-user" />
          </CropperImage>
          <p>{{ userInfo.nickName }}</p>
        </div>
        <div class="user_detail">
          <ul>
            <li>
              <div><i class="fa-solid fa-user" /> 登录账号</div>
              {{ userInfo.username }}
            </li>
            <li>
              <div><i class="fa-solid fa-phone" /> 手机号码</div>
              {{ userInfo.phoneNum ? userInfo.phoneNum : '-' }}
            </li>
            <li>
              <div><i class="fa-solid fa-envelope" /> 电子邮箱</div>
              {{ userInfo.email ? userInfo.email : '-' }}
            </li>
            <li>
              <div><i class="fa-solid fa-sitemap sub-el-icon" /> 所属部门</div>
              {{ userInfo.dept.name ? userInfo.dept.name : '-' }}
            </li>
            <li>
              <div><i class="fa-solid fa-user-tag" /> 所属角色</div>
              <span v-if="userInfo.length === 0">-</span>
              <div v-else>
                <span v-for="(role, index) in userInfo.roleList" :key="role.id">{{ `${role.name} ${userInfo.roleList.length > index + 1 ? '、' : ''}` }}</span>
              </div>
            </li>
            <li>
              <div><i class="fa-solid fa-calendar-days" /> 最后登录时间</div>
              {{ userInfo.lastLoginTime }}
            </li>
            <li>
              <div><i class="fa-solid fa-calendar-days" /> 创建时间</div>
              {{ userInfo.createdTime }}
            </li>
          </ul>
        </div>
      </el-card>
    </el-col>
    <el-col :span="18" :xs="24">
      <div class="card">
        <el-tabs value="userInfo">
          <el-tab-pane label="基本信息" name="userInfo">
            <BasicInfo />
          </el-tab-pane>
          <el-tab-pane label="账号配置" name="accountConfig">
            <AccountConfig />
          </el-tab-pane>
          <el-tab-pane label="日志" name="logs">
            <Logs />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { mapGetters } from 'vuex'
import { edit } from '@/api/user'

export default {
  name: 'Profile',
  components: {
    CropperImage: () => import('@/components/CropperImage/index.vue'),
    AccountConfig: () => import('@/views/user/components/AccountConfig.vue'),
    BasicInfo: () => import('@/views/user/components/BasicInfo.vue'),
    Logs: () => import('@/views/user/components/Logs.vue')
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    handleAvatarInput(value) {
      this.userInfo.avatar = value
      edit(this.userInfo).then(res => {
        this.$message.success('编辑成功')
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep.avatar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .preview-img {
    border: 1px solid #ededed;
    border-radius: 15px !important;
  }

  .preview-img img {
    border-radius: 15px !important;
  }

  p {
    font-size: 20px;
    font-weight: bold;
  }
}

.card {
  padding: 10px 20px 20px !important;
}

.user_detail {
  width: 100%;

  ul {
    list-style: none;
    padding: 0;

    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e7eaec;
      border-top: 1px solid #e7eaec;
      margin-bottom: -1px;
      padding: 10px 0;
      font-size: 13px;
      color: #4d4d4d;
    }
  }
}
</style>
